<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      @select="Select"
      active-text-color="#ffd04b"
      :router="true"
    >
      <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.name">
        <template slot="title">
          <span>{{ item.navItem }}</span>
        </template>
      </el-menu-item>
      <!-- <el-menu-item index="/about">用户管理</el-menu-item>
      <el-menu-item index="2">视频管理</el-menu-item>
      <el-menu-item index="3">文档管理</el-menu-item>
      <el-menu-item index="4">关于我们</el-menu-item>
      <el-menu-item index="5"
        ><a href="https://www.imooc.com" target="_blank"
          >教育培训</a
        ></el-menu-item
      > -->
    </el-menu>
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        { name: "/user", navItem: "用户管理" },
        { name: "/course", navItem: "课程管理" },
        { name: "/doc", navItem: "类别管理" },
        { name: "/ebook", navItem: "文档管理" },
        { name: "/about", navItem: "关于我们" },
      ],
    };
  },
  methods: {
    Select(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
    
